<template>
	<view class="pro">
		<ul class="prolist">
			<li class="li" v-for="(item,index) in prolist" :key="index" @click="details(item)">
				<image :src="item.img1" class="img"></image>
				<view class="txt">
					<text style="color: orangered;font-weight: bold;margin: 5px;">{{ item.category }}</text>
					<text>{{ item.proname }}</text>
					<text style="color: orangered;font-weight: bold;margin: 5px;">¥{{ item.originprice }}</text>
				</view>
			</li>
		</ul>

	</view>
</template>

<script>
	export default {
		props: ['prolist'],
		methods: {
			details(item) {
				uni.navigateTo({
					url: `/pages/details/details?item=${encodeURIComponent(JSON.stringify(item))}`
				});
			}
		}
	}
</script>

<style lang="scss">
	.pro {
		margin-top: 3vh;
		width: 100vw;
		height: 35vh;

		.prolist {
			width: 100vw;
			height: 100%;
			display: flex;
			flex-wrap: wrap;

			.li {
				margin: 1vw;
				width: 47vw;
				height: 450rpx;

				.img {
					width: 100%;
					height: 60%;
				}

				.txt {
					height: 500rpx;
				}
			}
		}
	}
</style>